<template>
  <div>
    <div class="videoContainer">
      <video
          ref="videoPlayer"
          class="fullscreenVideo"
          id="bgVid"
          playsinline=""
          autoplay=""
          muted=""
          loop=""
      >
        <source
            :src="currentVideoPath"
            type="video/mp4"
        >
      </video>
    </div>

    <!-- 图标组容器 -->
    <div
        class="iconGroup"
        @click="toggleIcons"
    >
      <!-- 背景图标 -->
      <img
          class="mainIcon"
          src="@/icons/png/beijing.png"
          alt="主图标"
      >
      <!-- 展开的图标 -->
      <div
          v-if="expanded"
          class="expandedIcons"
      >
        <img
            v-for="(video, index) in backVideo"
            :key="index"
            class="icon"
            :src="video.cover"
            @click="switchVideo(video.path)"
            :alt="video.alt"
        >
      </div>
    </div>
    <!-- 音乐图标 -->
    <div class="iconMusic">
      <el-tooltip
          content="音乐"
          placement="top"
      >
        <img
            class="mainIcon"
            src="@/icons/png/music.png"
            alt="音乐"
            @click="openMusicPopup"
        >
      </el-tooltip>
    </div>

    <!-- 白噪音图标 -->
    <div
        class="iconWhiteMusic"
        @click="openWhiteMusicPopup"
    >
      <el-tooltip
          content="白噪音"
          placement="top"
      >
        <img
            class="mainIcon"
            src="@/icons/png/whiteMusic.png"
            alt="白噪音"
        >
      </el-tooltip>
    </div>

    <!-- 番茄钟图标 -->
    <div
        class="iconClock"
        @click="openClockPopup"
    >
      <el-tooltip
          content="番茄钟"
          placement="top"
      >
        <img
            class="mainIcon"
            src="@/icons/png/shizhong.png"
            alt="番茄钟"
        >
      </el-tooltip>
    </div>

    <!-- 代办事项图标 -->
    <div
        class="iconMatter"
        @click="openMatterPopup"
    >
      <el-tooltip
          content="代办事项"
          placement="top"
      >
        <img
            class="mainIcon"
            src="@/icons/png/matter.png"
            alt="代办事项"
        >
      </el-tooltip>
    </div>

    <!-- 专注统计图标 -->
    <div class="iconStatistics" @click="openStatistics">
      <el-tooltip content="专注统计" placement="top">
        <img class="mainIcon" src="@/icons/png/statistics.png" alt="专注统计">
      </el-tooltip>
    </div>

    <!-- 翻译图标 -->
    <div class="iconTranslate" @click="openTranslateVisible">
      <el-tooltip content="单词翻译" placement="top">
        <img class="mainIcon" src="https://gulimall-chengke123.oss-accelerate.aliyuncs.com/8a83caf459e7363e7ade8742f4b050f4505c7b4ffed448bd65f42957ac70c851.png" alt="单词翻译">
      </el-tooltip>
    </div>

    <!-- 音乐弹窗 -->
    <div
        @mousedown="musicDrag"
        class="todoBox"
        v-show="outerMusicVisible"
        :style="{ left: musicLeft, top: musicTop }"
    >
      <div class="todo-title">
        <span>歌单</span>
        <span @click="outerMusicVisible = false">-</span>
      </div>
      <div class="todo-list">
        <div class="todo-item" v-for="(item, index) in musicCategories" :key="index" @click="openMusic(item)">
          <span>{{ item.label }}</span>
          <div class="option">
            <i class="el-icon-arrow-right" />
          </div>
        </div>
      </div>
    </div>

    <!-- 单词翻译弹窗 -->
    <el-dialog
        title="单词翻译"
        :visible.sync="translateVisible"
        width="50%"
        append-to-body
    >
      <div class="translation-dialog">
        <div class="translate-input">
          <el-form ref="translationForm" :model="form" label-width="0">
            <el-form-item>
              <el-input type="textarea" v-model="form.inputText" placeholder="请输入需要翻译的文本" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="translate-output">
          <el-input type="textarea" :rows="6" v-model="form.translatedText" disabled placeholder="翻译结果"></el-input>
        </div>
      </div>
    </el-dialog>

    <!-- 点击歌单播放音乐弹窗弹窗 -->
    <el-dialog :title=innerMusicVisibleTitle :visible.sync="innerMusicVisible" width="30%" append-to-body>
      <Aplayer autoplay
               :music="musicList[0]"
               :list="musicList">
      </Aplayer>
    </el-dialog>

    <!-- 白噪音弹窗 -->
    <el-dialog
        title="白噪音"
        :visible.sync="whiteMusicVisible"
        width="30%"
        append-to-body
    >
      <Aplayer
          autoplay
          :music="musicWhiteList[0]"
          :list="musicWhiteList"
      >
      </Aplayer>
    </el-dialog>

    <!-- 番茄钟弹窗 -->
    <el-dialog
        title="番茄时钟"
        :visible.sync="clockVisible"
        width="50%"
    >
      <PomodoroComponent :initial-time="initialTime"/>
    </el-dialog>

    <!-- 待办事项弹窗 -->
    <div
        @mousedown="todoDrag"
        class="todoBox"
        v-show="matterVisible"
        :style="{ left: todoLeft, top: todoTop }"
    >
      <div class="todo-title">
        <span>添加代办事项</span>
        <span @click="matterVisible = false">-</span>
      </div>
      <div class="todo-list">
        <div
            class="todo-item"
            v-for="(item, index) in todoList"
            :key="index"
        >
          <span>{{ item.name }}</span>
          <div class="option">
            <i
                class="el-icon-edit"
                @click="todoEdit(item)"

            />
            <i
                class="el-icon-delete-solid"
                @click="todoDel(item)"
            />
            <i class="el-icon-arrow-right"  @click="openToDoTask(item)"/>
          </div>
        </div>
      </div>
      <div
          class="todo-btn"
          @click="addVisible"
      >
        <div style="text-align: center;flex:1;">添加代办事项</div>
        <i class="el-icon-plus" />
      </div>
    </div>

    <!-- 添加代办弹层 -->
    <el-dialog
        :visible.sync="todoVisible"
        top="40vh"
        width="30%"
    >
      <div slot="title">
        <div>{{ todoType == 'add' ? '创建' : '编辑' }}待办事项</div>
        <div>给你的待办事项去一个独特的名字吧</div>
      </div>
      <div>
        <el-input
            placeholder="请输入待办事项名称"
            v-model="todoValue"
        ></el-input>
      </div>
      <div slot="footer">
        <el-button @click="todoVisible = false">取消</el-button>
        <el-button
            type="primary"
            :disabled="todoValue.length <= 0"
            @click="todoSubmit"
        >确认</el-button>
      </div>
    </el-dialog>


    <!-- 添加代办事项的任务弹层 -->
    <div
        class="todoTaskBox"
        v-show="todoTaskVisible"
        :style="{ left: todoLeft1, top: todoTop1 }"
    >
      <div class="todo-title">
        <div @click="backTask">
          <i class="el-icon-arrow-left"></i>
          <span>{{ todoTaskTitle||'hahah' }}</span>
        </div>
        <span @click="todoTaskVisible = false">-</span>
      </div>
      <div class="todo-list">
        <template v-if="taskMissionList.length>0">
          <div
              class="todo-item"
              v-for="(item, index) in taskMissionList"
              :key="index"
          >
            <div style="display:flex;justify-content: space-between;">
              <span>{{ item.name }}</span>
              <div class="option">
                <i
                    class="el-icon-edit"
                    @click="todoTaskEdit(item)"
                />
                <i
                    class="el-icon-delete-solid"
                    @click="todoTaskDel(item)"
                />
<!--                 <i class="el-icon-arrow-right"  @click="openToDoTask(item)"/>-->
              </div>
            </div>
            <div class="taskoptinBox">
              <div class="taskTime">{{ item.duration }} 分钟</div>
              <div class="taskfn">
                <template v-if="item.status === 0">
                  <i class="el-icon-video-play" @click="todoTaskTime(item)"></i>
                  <span>开始</span>
                </template>
                <template v-if="item.status === 1">
                  <i class="el-icon-video-pause" @click="todoTaskTimecomplete(item)"></i>
                  <span>进行中</span>
                </template>
                <template v-if="item.status === 2">
                  <span>已完成</span>
                </template>
              </div>
            </div>

          </div>
        </template>

      </div>

      <div
          class="todo-btn"
          @click="addTaskFn"
      >
        <div style="text-align: center;flex:1;">添加任务</div>
        <i class="el-icon-plus" />
      </div>
    </div>

    <!-- 添加代办任务弹层 -->
    <el-dialog
        :visible.sync="todoMissionVisible"
        top="40vh"
        width="30%"
    >
      <div slot="title">
        <div>{{ todoType1 == 'add' ? '添加' : '编辑' }}任务</div>
        <div>你可以在下面编辑你的任务描述。</div>
      </div>
      <div style="margin-bottom:10px;">
        <el-input
            placeholder="请输入任务名称"
            v-model="taskObj.name"
        ></el-input>
      </div>
      <div>
        <el-input
            placeholder="请输入任务时长(分钟)"
            v-model="taskObj.duration"
        ></el-input>
      </div>
      <div slot="footer">
        <el-button @click="todoMissionVisible = false">取消</el-button>
        <el-button
            type="primary"
            @click="todoMissionSubmit"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {articleInfo, featchCategory, getWhiteMusic} from '@/api'
import Aplayer from 'vue-aplayer'
import PomodoroComponent  from './components/Pomodoro.vue'
import {
  addTask,
  updateTask,
  delTask,
  getMatter,
  getStatistics,
  deleteMatterTask,
  updateMatterTask,
  getMusic,
  getMatterTaskListByMatterId,
  createMatterTask,
  updateMatterTaskStatus, fakeTranslation
} from "./api";
import { getToken, } from '@/utils/cookieUtil'
export default {
  components: {
    Aplayer,
    PomodoroComponent
  },
  data () {
    return {
      initialTime: 1,
      form:{
        inputText: '',
        translatedText: ''
      },
      timer: null,
      backVideo: [], // 视频列表，每个对象包含视频路径和对应图标的信息
      currentVideoPath: '',  // 当前播放视频的路径
      currentMusic: '', // 当前音乐的播放路径
      expanded: false, // 是否展开图标
      // 是否显示音乐弹窗
      outerMusicVisible: false,
      innerMusicVisible: false,
      musicCategories: [],
      musicList: [],
      musicWhiteList: [],
      // 是否显示白噪音音乐弹窗
      whiteMusicVisible: false,
      // 是否显示番茄中弹窗
      clockVisible: false,
      translateVisible: false, // 是否翻译统计弹窗
      todoTaskVisible: false,
      todoTaskTitle: '',
      todoTaskTimeStatus:1,
      todoMissionVisible:false,
      todoType1:'',
      taskObj:{
        matterId:'',
        name:'',
        duration:'',
      },
      taskMissionList:[],
      timerRunning: false,
      startTime: null,
      inputContent: '',
      oContent: {},
      flag: true,
      flag2: true,
      //我定义flagflag2的初衷是为了当我点击方块放大对话框后，点击x隐藏对话框，当我再次呼出对话框时，想让对话框的大小为正常大小
      //而不是放大后的大小。如果你没有点击方块放大的需求，这部分可以不用写。
      pageData: {
        pageNo: 1,
        pageSize: 100,
        spaceId: '',
        status: 0
      },
      rightShow: true,
      style: '',
      titles: [],
      images: {},
      innerMusicVisibleTitle: '',
      dialogVisible: false,
      active: 0,
      fontNumber: 0,
      articleId: this.$route.params.articleId,
      serceShow: 0,
      left: "0px",
      codes: [],
      // 是否显示事项弹窗
      matterVisible: false,
      todoLeft: '50%',
      todoTop: '50%',
      musicLeft: '20%',
      musicTop: '50%',
      todoLeft1: '30%',
      todoTop1: '40%',
      todoVisible: false,
      todoValue: '',
      todoType: 'add',
      todoList: [],
      todoItem: null,
      statistics: {}
    }
  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll, false)
  },
  computed: {
  },
  watch: {
    'form.inputText'(newVal) {
      this.translateText(newVal);
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.onScroll);
  },

  created () {
    this.pageData.spaceId = this.articleId
    articleInfo(this.pageData).then(res => {
      this.backVideo = res.data.list;
      if (this.backVideo.length > 0) {
        this.currentVideoPath = this.backVideo[0].path;
        // 获取视频播放器元素并重新加载视频
        this.$refs.videoPlayer.load();
        // 播放视频
        this.$refs.videoPlayer.play();
      }
    }).catch(err => {
      console.error(err);
    });
    this.getWhiteMusic()

  },

  methods: {
    translateText(text) {
      // 检查输入文本是否为空
      if (!text.trim()) {
        return; // 如果为空，直接返回，不执行后续代码
      }
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // 在这里执行翻译的请求
        // 示例中使用假数据
        // Replace this with your actual translation API call
        fakeTranslation({ inputText: text }).then(res => {
          this.form.translatedText = this.processTranslationResult(res.data);
        });
      }, 3000);
    },
    processTranslationResult(data) {
      let translation = '';
      if (data.translation && data.translation.length > 0) {
        translation += '基本翻译：\n';
        translation += data.translation.join(', ') + '\n\n'; // 添加换行
      }

      if (data.web && data.web.length > 0) {
        translation += '网络释义：\n';
        data.web.forEach(item => {
          translation += `${item.key}: ${item.value.join(', ')}\n`;
        });
      }
      return translation;
    },
    openTranslateVisible(){
      console.log("点击打开翻译弹窗")
      this.translateVisible = !this.translateVisible
    },
    todoTaskTimecomplete(item){
      this.todoTaskTimeStatus = 1
      updateMatterTaskStatus({id:item.id,status: 2 }).then(() =>{
        this.getMatterTaskListByMatterId(item.matterId)
      })
    },
    todoTaskTime(item){
      this.todoTaskTimeStatus = 2
      this.clockVisible = true
      this.initialTime = item.duration
      updateMatterTaskStatus({id:item.id,status: 1 }).then(() =>{
        this.getMatterTaskListByMatterId(item.matterId)
      })
    },
    openToDoTask(item){
      console.log("点击打开代办事项任务弹窗")
      this.todoTaskVisible = true
      this.todoTaskTitle = item.name
      this.taskObj.matterId  = item.id
      this.matterVisible = false
      this.getMatterTaskListByMatterId(item.id)
    },
    // 点击歌单打开音乐弹窗
    openMusic(item){
      console.log(item);
      this.getMusic(item)
          .then(() => {
            this.innerMusicVisibleTitle = item.label;
            this.innerMusicVisible = !this.innerMusicVisible;
          })
          .catch(error => {
            console.error('获取音乐数据时出错：', error);
          });
    },
    async getMusic(item) {
      await getMusic({category: item.value}).then(res => {
        this.musicList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    openStatistics(){
      console.log("点击打开专注统计")
      if (!this.$store.state.userInfo) {
        this.$store.commit("setLoginFlag", true)
        return;
      }
      this.$router.push({ path: "/dashboard" })
      // this.outerStatisticsVisible = !this.outerStatisticsVisible
      // this.getStatistics();
    },
    // 获取统计信息
    getStatistics(){
      getStatistics().then(res =>{
        this.statistics = res.data
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取代办事项
    getMatter () {
      getMatter().then(res => {
        this.todoList = res.data.list;
      }).catch(error =>{
        console.log(error)
      })
    },
    handleClose (done) {
      // 弹窗关闭前的处理
      done(); // 关闭弹窗
    },
    async openMatterPopup(val) {
      console.log("点击代办图标")
      if (!this.$store.state.userInfo) {
        this.$store.commit("setLoginFlag", true)
        return;
      }
      await this.getMatter()
      this.matterVisible =  val? val: !this.matterVisible
    },
    openClockPopup () {
      this.clockVisible = !this.clockVisible
      console.log("点击番茄钟图标")
    },
    openWhiteMusicPopup () {
      console.log("点击白噪音图标")
      this.whiteMusicVisible = !this.whiteMusicVisible
    },
    openMusicPopup () {
      this.getMusicCategories()
      this.outerMusicVisible = !this.outerMusicVisible;
      console.log("点击音乐图标")
    },
    getMusicCategories(){
      featchCategory({type: "music_playlist"}).then(res => {
        // 清空 musicCategories 数组
        this.musicCategories = [];
        // 将返回的数据添加到 musicCategories 数组中
        this.musicCategories.push(...res.data);
      });
    },
    toggleIcons () {
      // 切换图标的展开状态
      this.expanded = !this.expanded;
    },
    switchVideo (videoPath) {
      this.currentVideoPath = videoPath;
      // 获取视频播放器元素并重新加载视频
      this.$refs.videoPlayer.load();
      // 播放视频
      this.$refs.videoPlayer.play();
    },
    getWhiteMusic () {
      let pageData = {
        pageNo: 1,
        pageSize: 100,
        status: 0,
      }
      getWhiteMusic(pageData).then(res => {
        this.musicWhiteList = res.data.list
      }).catch(err => {
        console.log(err)
      })
    },
    addVisible () {
      this.todoType = 'add'
      this.todoVisible = true
    },
    todoEdit (item) {
      this.todoItem = item;
      this.todoType = 'edit'
      this.todoVisible = true
    },
    todoDel (item) {
      delTask({ id: item.id }).then(res => {
        if (res.code === 0) {
          this.$toast.success('删除代办事项成功')
          this.getMatter()
        }
      }).catch(err => {
        this.$toast.error(err)
      })
    },

    // 待办任务列表
    getMatterTaskListByMatterId(id){
      getMatterTaskListByMatterId({matterId:id}).then(res=>{
        this.taskMissionList = res.data
      })
    },
    // 新增待办任务
    addTaskFn(){
      this.todoType1 = 'add'
      this.todoMissionVisible = true
    },
    //待办任务编辑
    todoTaskEdit (item) {
      this.taskObj = item;
      this.todoType1 = 'edit'
      this.todoMissionVisible = true
    },
    //待办任务删除
    todoTaskDel (item) {
      deleteMatterTask({ id: item.id }).then(res => {
        if (res.code === 0) {
          this.$toast.success('删除待办任务成功')
          this.getMatterTaskListByMatterId(item.matterId)
        }
      }).catch(err => {
        this.$toast.error(err)
      })
    },
    backTask(){
      this.todoTaskVisible  = false
      this.openMatterPopup(true)
    },
    // 待办任务提交
    async  todoMissionSubmit(){
      if(!this.taskObj.name||!this.taskObj.duration) return  this.$toast.error('请完成必填项目')
      const res = this.todoType1 === 'add' ? await createMatterTask(this.taskObj) : await updateMatterTask(this.taskObj)
      if (res.code === 0) {
        this.$toast.success('操作成功')
        this.todoMissionVisible = false
        this.getMatterTaskListByMatterId(this.taskObj.matterId)
      }

    },
    //提交
    async todoSubmit () {
      let token = getToken()
      if (token) {
        const res = this.todoType === 'add' ? await addTask({ name: this.todoValue, status: '0' }) : await updateTask({ ...this.todoItem, name: this.todoValue })
        if (res.code === 0) {
          this.$toast.success('添加代办事项成功')
          this.todoVisible = false
          this.todoValue = ''
          this.todoType = 'add'
          this.getMatter()
        }
      }
    },
    // 音乐歌单拖动
    musicDrag(ev){
      var that = this
      // let todoNode = document.getElementById("todoBox");
      let disX = 0;
      let disY = 0;
      let oEvent = ev || event;
      document.onmousemove = function (ev) {
        let oEvent = ev || event;
        that.musicLeft = oEvent.clientX - disX + 'px';
        that.musicTop = oEvent.clientY - disY + 'px';

      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      //阻止默认事件
      return false;
    },
    //待办拖动
    todoDrag (ev) {
      var that = this
      // let todoNode = document.getElementById("todoBox");
      let disX = 0;
      let disY = 0;
      let oEvent = ev || event;
      document.onmousemove = function (ev) {
        let oEvent = ev || event;
        that.todoLeft = oEvent.clientX - disX + 'px';
        that.todoTop = oEvent.clientY - disY + 'px';

      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      //阻止默认事件
      return false;
    }
  },
}
</script>

<style
    lang="scss"
    scoped
>
.music-item {
  margin-bottom: 10px;
}

/* 样式可以根据实际情况自行调整 */
.iconStatistics {
  position: fixed;
  bottom: 10px;
  left: 65%;
  transform: translateX(-50%);
}

.iconMatter {
  position: fixed;
  bottom: 10px;
  left: 60%;
  transform: translateX(-50%);
}

.iconClock {
  position: fixed;
  bottom: 10px;
  left: 55%;
  transform: translateX(-50%);
}
.iconTranslate {
  position: fixed;
  bottom: 10px;
  left: 70%;
  transform: translateX(-50%);
}

.iconWhiteMusic {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.iconMusic {
  position: fixed;
  bottom: 10px;
  left: 45%;
  transform: translateX(-50%);
}

/* 图标组容器样式 */
.iconGroup {
  position: fixed;
  bottom: 10px;
  left: 40%;
  transform: translateX(-50%);
}

/* 主图标样式 */
.mainIcon {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* 展开的图标样式 */
.expandedIcons {
  position: fixed;
  bottom: 70px;
  left: 0;
  background-color: #ffffff;
  /* 可以设置背景颜色 */
  border: 1px solid #cccccc;
  /* 可以设置边框 */
  padding: 10px;
  /* 可以设置内边距 */
  z-index: 100;
  /* 可以设置 z-index */
  display: flex;
  align-items: center;
}

/* 图标样式 */
.icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  cursor: pointer;
}

.videoContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fullscreenVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#robot {
  position: absolute;
  bottom: 50px;
  right: 100px;
  width: 40px;
  height: 70px;
  z-index: 9999;
}

#box {
  position: absolute;
  width: 500px;
  height: 450px;
  top: 20%;
  left: 33%;
  z-index: 8888;
  background: rgb(195, 218, 226);
  border-radius: 5px;
  display: none;
}

.uImg,
.rImg {
  width: 40px;
  height: 40px;
}

.container {
  height: 100%;
  border-radius: 5px;
}

#header {
  height: 35px;
  line-height: 35px;
  padding: 6px 15px;
  color: #fff;
  font-size: 20px;
  background: rgb(219, 74, 70);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  display: flex;
  justify-content: space-between;
  user-select: none;
}

.cBox {
  height: 90%;
}

.contents {
  height: 85%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  padding: 4px 10px;
  background: #fff;
}

.self {
  float: right;
  height: 40px;
  margin-bottom: 20px;
}

.other {
  position: relative;
}

.clearfix::before {
  display: block;
  content: '';
  clear: both;
}

.answerContent {
  padding: 0 6px;
  line-height: 30px;
  background: rgb(80, 126, 164);
  border-radius: 6px;
  color: #fff;
  margin-left: 50px;
  margin-bottom: 10px;
}

.answerContent p {
  color: #fff;
}

.rImg {
  position: absolute;
  left: 0;
  top: 0;
}

.question {
  padding: 0 6px;
  height: 40px;
  line-height: 40px;
  background: rgb(245, 225, 152);
  border-radius: 6px;
  color: #333;
  margin-right: 10px;
}

img {
  display: inline-block;
}

.userQuestion {
  display: flex;
  justify-content: flex-start;
}

.userInput {
  padding: 10px 10px;
  height: 8%;
  display: flex;
  justify-content: space-between;
}

.tBox {
  width: 80%;
  height: 30px;
  border-radius: 6px;
  background: rgb(242, 245, 242);
}

.ipt {
  width: 100%;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  resize: none;
  border: none;
  outline: none;
}

.vp-button--primary {
  width: 15%;
  background: rgb(80, 126, 164);
  color: #fff;
  font-weight: 600;
  line-height: 30px;
  height: 30px;
  padding: 0;
  border: none;
}

//歌单样式
.musicBox {
  padding: 10px;
  width: 260px;
  height: 300px;
  background-color: #2c2c2c;
  border-radius: 8px;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;

  .music-title {
    color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .music-list {
    flex: 1;
    margin-top: 10px;
    overflow: auto;

    .music-item {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      padding: 5px;
      color: #fff;
      background-color: #323232;
      border-radius: 5px;
      align-items: center;

      .option {
        i {
          margin-left: 10px;
        }
      }
    }
  }

  .music-btn {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    color: #fff;
    background-color: #323232;
    border-radius: 5px;
    align-items: center;
  }
}

//代办样式
.todoBox {
  padding: 10px;
  width: 260px;
  height: 300px;
  background-color: #2c2c2c;
  border-radius: 8px;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;

  .todo-title {
    color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .todo-list {
    flex: 1;
    margin-top: 10px;
    overflow: auto;

    .todo-item {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      padding: 5px;
      color: #fff;
      background-color: #323232;
      border-radius: 5px;
      align-items: center;

      .option {
        i {
          margin-left: 10px;
        }
      }
    }
  }

  .todo-btn {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    color: #fff;
    background-color: #323232;
    border-radius: 5px;
    align-items: center;
  }
}


/deep/ .el-dialog{

}
// 待办任务
.todoTaskBox{
  padding: 10px;
  width: 260px;
  height: 300px;
  background-color: #2c2c2c;
  border-radius: 8px;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;

  .todo-title {
    color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .todo-list {
    flex: 1;
    margin-top: 10px;
    overflow: auto;

    .todo-item {
      margin-bottom: 10px;
      display: flex;
      /* justify-content: space-between; */
      flex-direction: column;
      padding: 5px;
      color: #fff;
      background-color: #323232;
      border-radius: 5px;
      /* align-items: center; */

      .option {
        i {
          margin-left: 10px;
        }
      }

      .taskoptinBox{
        margin-top: 10px;
        display: flex;
        align-items: center;

        .taskfn{
          margin-left: 10px;
          font-size: 14px;
          padding: 0 10px;
          border:1px solid #fff;
          border-radius: 20px;
          span{
            margin-left: 5px;
          }
        }
      }
    }
  }

  .todo-btn {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    color: #fff;
    background-color: #323232;
    border-radius: 5px;
    align-items: center;
  }
}

.translation-dialog {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.translate-input {
  margin-bottom: 20px;
}
.translate-output {
  flex-grow: 1;
}
</style>
